<template>
  <div id="main">
    <a-layout class="main-wrap">
      <a-layout-sider width="210" class="main-sider">
        <Sider />
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="main-header">
          <Nav />
        </a-layout-header>
        <a-layout-content class="main-content">
          <router-view></router-view>
        </a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue';
import Sider from '@/components/Sider.vue';

export default {
  components: {
    Sider,
    Nav,
  },
};
</script>

<style lang="scss" scoped>
#main {
  margin: auto;
  width: 1400px;
  min-width: 1000px;
  height: 90vh;
}
.main-wrap {
  height: 100%;
}
.main-header {
  background: #1e1e1f;
}
.main-footer {
  background: #1e1e1f;
}
.main-sider {
  min-width: 280px;
  width: 280px;
  background: #171718;
}
.main-content {
  background: #1e1e1f;
}
</style>
